<template>
  <component v-bind:is="MHouse" />
</template>

<script setup lang="ts">
  import HelloWorld from './components/HelloWorld.vue'
  import Refrect from './components/Refrect.vue'
  import Wave from './components/wave.vue'
  import Three from './components/Three.vue'
  import Pasture from './components/Pasture.vue'
  import House from './components/House.vue'
  import MHouse from './components/MHouse.vue'
</script>

<style scoped lang="less">
@violet:#646cffaa;
@coralGreen: #42b883aa;
#app,body {
  margin:0;
  padding:0;
}
#app {
  width:100vw;
  height: 100vh;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em @violet);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em @coralGreen);
}
</style>
